<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

    <!-- Bootstrap -->
    <link href="../../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        th {
            text-align: center;
        }

        td {
            text-align: center;
        }

        .row-margin-top {
            margin-top: 10px;
        }
    </style>

    <script>

        function edit_studio(studioId) {
            $.ajax({
                url: "../../studio/findStudioById?studioId=" + studioId,
                type: "post",
                success: function (studio) {
                    // alert(studio);
                    $("body").html('<!-- 修改剧目的模态框 -->\n' +
                        '<!-- Modal -->\n' +
                        '<div >\n' +
                        '    <div class="modal-dialog" role="document">\n' +
                        '        <div class="modal-content">\n' +
                        '            <div class="modal-header">\n' +
                        '                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n' +
                        '                <h4 class="modal-title" >修改演出厅</h4>\n' +
                        '            </div>\n' +
                        '            <div class="modal-body">\n' +
                        '                <form id="editStudioForm" class="form-horizontal">\n' +
                        '                    <div class="form-group">\n' +
                        '                        <label class="col-sm-2 control-label">演出厅名称</label>\n' +
                        '                        <div class="col-sm-10">\n' +
                        '                            <input type="text" class="form-control" id="studioName_input" value="' + studio.studioName + '" name="studioName">\n' +
                        '                            <span class="help-block" id="studioName_span"></span>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '\n' +
                        '                    <div class="form-group">\n' +
                        '                        <label class="col-sm-2 control-label">座位行数</label>\n' +
                        '                        <div class="col-sm-10">\n' +
                        '                            <input type="text" class="form-control" id="studioRowcount_input" value="' + studio.studioRowcount + '" name="studioRowcount">\n' +
                        '                            <span class="help-block" id="studioRowcount_span"></span>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="form-group">\n' +
                        '                        <label class="col-sm-2 control-label">座位列数</label>\n' +
                        '                        <div class="col-sm-10">\n' +
                        '                            <input type="text" class="form-control" id="studioColcount_input" value="' + studio.studioColcount + '" name="studioColcount">\n' +
                        '                            <span class="help-block" id="studioColcount_span"></span>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '            <div class="modal-footer">\n' +
                        '                <button type="button" class="btn btn-default" id="close_btn" data-dismiss="modal">关闭</button>\n' +
                        '                <button type="submit" class="btn btn-primary" id="studio_update_btn">修改</button>\n' +
                        '            </div>\n' +
                        '                </form>\n' +
                        '            </div>\n' +

                        '        </div>\n' +
                        '    </div>\n' +
                        '</div>');
                    //关闭编辑页面
                    $("#close_btn").click(function () {
                        location.href = "studio.html";
                    });
                    //保存修改并返回studio.html 页面
                    // $("#studio_update_btn").click(function () {
                    $("#editStudioForm").submit(function () {
                        if (studioNameSet() && studioRowcountSet() && studioColcountSet()) {
                            if (confirm("确认修改？")) {
                                $.ajax({
                                    url: "../../studio/editStudio?studioId=" + studio.studioId,
                                    type: "post",
                                    data: $("#editStudioForm").serialize(),
                                    success: function () {
                                    },
                                    dataType: "json"
                                });
                                location.href = "studio.html";
                            };
                        };
                        return false;
                    });
                    // });
                    $("#studioName_input").blur(studioNameSet);
                    $("#studioRowcount_input").blur(studioRowcountSet);
                    $("#studioColcount_input").blur(studioColcountSet);
                },
                dataType: "json"
            })
        }

        function studioNameSet() {
            var studioNameVal = $("#studioName_input").val();
            var reg = /^[ \u4e00-\u9fa50-9A-Za-z]{1,16}$/;
            var flag = reg.test(studioNameVal);
            if (flag) {
                $("#studioName_input").css("border", "1px solid green");
                $("#studioName_span").html('');
            } else {
                $("#studioName_input").css("border", "1px solid red");
                $("#studioName_span").html('演出厅名称只能为汉字,字母或数字，长度在1-16位');
            }
            return flag;
        }

        function studioRowcountSet() {
            var studioRowcountVal = $("#studioRowcount_input").val();
            var reg = /(^[0-9]{1,}$)/;
            var flag = reg.test(studioRowcountVal);
            if (flag) {
                $("#studioRowcount_input").css("border", "1px solid green");
                $("#studioRowcount_span").html('');
            } else {
                $("#studioRowcount_input").css("border", "1px solid red");
                $("#studioRowcount_span").html('座位数目需为整数');
            }
            return flag;
        }

        function studioColcountSet() {
            var studioColcountVal = $("#studioColcount_input").val();
            var reg = /(^[0-9]{1,}$)/;
            var flag = reg.test(studioColcountVal);
            if (flag) {
                $("#studioColcount_input").css("border", "1px solid green");
                $("#studioColcount_span").html('');
            } else {
                $("#studioColcount_input").css("border", "1px solid red");
                $("#studioColcount_span").html('座位数目需为整数');
            }
            return flag;
        }

        function addStudio() {
            $("body").html('<div class="modal-fade" id="studio_add_Modal" >\n' +
                '    <div class="modal-dialog" role="document">\n' +
                '        <div class="modal-content">\n' +
                '            <div class="modal-header">\n' +
                '                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n' +
                '                <h4 class="modal-title" id="myModalLabel">添加演出厅</h4>\n' +
                '            </div>\n' +
                '            <div class="modal-body">\n' +
                '                <form id="addStudioForm" class="form-horizontal">\n' +
                '\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">演出厅名称</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <input type="text" class="form-control" id="studioName_input" placeholder="studioName" name="studioName">\n' +
                '                            <span id="studioName_span" class="help-block"></span>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">座位行数</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <input type="text" class="form-control" id="studioRowcount_input" placeholder="studioRowcount" name="studioRowcount">\n' +
                '                            <span id="studioRowcount_span" class="help-block"></span>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">座位列数</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <input type="text" class="form-control" id="studioColcount_input" placeholder="studioColcount" name="studioColcount">\n' +
                '                            <span id="studioColcount_span" class="help-block"></span>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '\n' +
                '            <div class="modal-footer">\n' +
                '                <button id="close_btn" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>\n' +
                '                <button type="submit" class="btn btn-primary" id="studio_save_btn">保存</button>\n' +
                '            </div>\n' +
                '                </form>\n' +
                '\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '</div>');
            $("#close_btn").click(function () {
                location.href = "studio.html";
            });
            $("#addStudioForm").submit(function () {
                if (studioNameSet() && studioRowcountSet() && studioColcountSet()) {
                    if (confirm("确认添加？")) {
                        $.ajax({
                            url: "../../studio/addStudio",
                            type: "post",
                            data: $("#addStudioForm").serialize(),
                            success: function (flag) {
                                if (flag) {
                                    location.href = "studio.html";
                                } else {
                                    alert("演出厅已存在");
                                }
                            },
                            dataType: "json"
                        })

                    }
                }
                return false;
            });
            // });
            $("#studioName_input").blur(studioNameSet);
            $("#studioRowcount_input").blur(studioRowcountSet);
            $("#studioColcount_input").blur(studioColcountSet);
        }

        function deleteStudio(studioId) {
            if (confirm("确认删除？")) {
                $.ajax({
                    url: "../../studio/deleteStudioById?studioId=" + studioId,
                    type: "post",
                    success: function (studio) {
                    },
                    dataType: "json"
                })
                location.href = "studio.html";
            }
        };

        function searchStudioByName() {
            var studioName = $("#select_input").val();
            var reg = /^[ \u4e00-\u9fa50-9A-Za-z]{1,16}$/;
            var flag = reg.test(studioName);
            if (flag) {
                $.ajax({
                    url: "../../studio/searchStudioByName?studioName=" + studioName,
                    type: "post",
                    success: function (studio) {
                        // alert(studio);
                        if (studio == null) {
                            alert('没有该演出厅');
                        } else {
                            var studio_the = '<tr>\n' +
                                '                        <th>演出厅编号</th>\n' +
                                '                        <th>演出厅名称</th>\n' +
                                '                        <th>座位行数</th>\n' +
                                '                        <th>座位列数</th>\n' +
                                '                        <th>操作</th>\n' +
                                '                    </tr>';
                            studio_the += '<tr>\n' +
                                '                        <th>' + studio.studioId + '</th>\n' +
                                '                        <th>' + studio.studioName + '</th>\n' +
                                '                        <th>' + studio.studioRowcount + '</th>\n' +
                                '                        <th>' + studio.studioColcount + '</th>\n' +
                                '                        <th><button id="edit_btn" onclick="edit_studio(' + studio.studioId + ')"><span>编辑</span></button><button id="delete_btn" onclick="deleteStudio(' + studio.studioId + ')"><span>删除</span></button></th>\n' +
                                '                    </tr>';
                            $("#studio_the").html(studio_the);
                        }
                    },
                    dataType: "json"
                })
            } else {
                alert('演出厅名称只能为汉字,字母或数字，长度在1-16位');
            }
        }

        $(function () {
            $.ajax({
                url: "../../studio/findAll",
                type: "post",
                success: function (studioAll) {
                    var studio_the = '<tr>\n' +
                        '                        <th>演出厅编号</th>\n' +
                        '                        <th>演出厅名称</th>\n' +
                        '                        <th>座位行数</th>\n' +
                        '                        <th>座位列数</th>\n' +
                        '                        <th>操作</th>\n' +
                        '                    </tr>';
                    $.each(studioAll, function (ind, ele) {
                        studio_the += '<tr>\n' +
                            '                        <th>' + ele.studioId + '</th>\n' +
                            '                        <th>' + ele.studioName + '</th>\n' +
                            '                        <th>' + ele.studioRowcount + '</th>\n' +
                            '                        <th>' + ele.studioColcount + '</th>\n' +
                            '                        <th><button id="edit_btn" onclick="edit_studio(' + ele.studioId + ')"><span>编辑</span></button><button id="delete_btn" onclick="deleteStudio(' + ele.studioId + ')"><span>删除</span></button></th>\n' +
                            '                    </tr>';
                    })
                    $("#studio_the").html(studio_the);
                },
                dataType: "json"
            })
        })
    </script>
</head>
<body>

<!-- 修改剧目的模态框 -->
<!-- Modal -->
<div class="modal fade" id="studio_update_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改演出厅</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">演出厅名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studioName_update_input"
                                   placeholder="studioName" name="studioName">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">座位行数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studioRowcount_update_input"
                                   placeholder="studioRowcount" name="studioRowcount">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">座位列数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studioColcount_update_input"
                                   placeholder="studioColcount" name="studioColcount">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="studio_update_btn">修改</button>
            </div>
        </div>
    </div>
</div>

<!--添加演出厅的模态框-->
<!-- Modal -->
<div class="modal fade" id="studio_add_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">添加演出厅</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">演出厅名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studioName_add_input" placeholder="studioName"
                                   name="studioName">
                            <span class="help-block"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">座位行数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studioRowcount_add_input"
                                   placeholder="studioRowcount" name="studioRowcount">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">座位列数</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="studioColcount_add_input"
                                   placeholder="studioColcount" name="studioColcount">
                            <span class="help-block"></span>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="studio_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<!--页面主体-->
<div class="container-fluid">
    <div class="row row-margin-top">
        <div class="col-md-12">
            <div class="row row-margin-top">
                <div class="col-md-8">
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="select_input" placeholder="请 输 入 演 出 厅 名 称"
                               name="studioId">
                        <span class="help-block"></span>
                    </div>
                    <div class="col-md-1">
                        <button id="select_button" onclick="searchStudioByName()" class="btn btn-success btn-sm"><span
                                class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索
                        </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-5">
                    <h1>演出厅管理</h1>
                </div>
            </div>
            <div class="row row-margin-top">
                <div class="col-md-1 col-md-offset-10">
                    <button id="studio_add_modal_btn" onclick="addStudio()" class="btn btn-primary btn-sm"><span
                            class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>&nbsp;新增
                    </button>
                </div>
            </div>
            <div class="row row-margin-top">
                <table id="studio_table" class="table table-bordered table-striped">
                    <thead id="studio_the">
                    <tr>
                        <th>演出厅编号</th>
                        <th>演出厅名称</th>
                        <th>座位行数</th>
                        <th>座位列数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row row-margin-top">
        <!-- 分页条信息 -->
        <div id="page_nav" class="col-md-4 col-md-offset-4">
        </div>
    </div>
    <!-- 显示分页信息 -->
    <div class="row row-margin-top">
        <!--分页文字信息  -->
        <div id="page_info" class="col-md-4 col-md-offset-4">
        </div>
    </div>
</div>
</body>
</html>